Canvas |
您所在的位置：网站首页 › canvas 旋转后保存图片 › Canvas |
Canvas
|
需求：移动端，做如下图片的一个海报，可以长按保存，其中标题文字，说明文字，logo图片，二维码（动态生成二维码）图片，都是可变元素，其余部分是一张图片！
我的canvas学习笔记gitlab 如果前端来做，首先，我想到的就是利用canvas绘制出来，然后，转换成img，放在页面中，这样用户就可以通过长按保存功能，保存图片了！ 思路步骤以及遇到的坑 使用Konva库绘制canvas，绘制文字（可以绘制在同一个组上）； 先生成二维码图片，再将二维码图片绘制到层上； 绘制logo图片和背景图片； canvas正确设置宽高属性单位必须是px、百分比适配；HTML 文字绘制方法封装 // @param: data 数组（因为可能有多个文字） function TextTitle(data){ this._init(data); } TextTitle.prototype = { _init: function(data){ this.data = data; // 新建文字组 this.textGroup = new Konva.Group({ x: 0,y: 0 }) var self = this; this.data.forEach(function(item,index){ var x = item.x === 0 ? 0 : (item.x || 1); var y = item.y === 0 ? 0 : (item.y || 1); var txt = new Konva.Text({ x: x,y: y, text: item.text, width: item.width, height: item.height, fontSize: item.fontSize || 16, fontStyle: item.fontStyle || 'normal', fontFamily: item.fontFamily || 'Arial', align: item.align || 'left', fill: item.fill || '#000', }); self.textGroup.add(txt); }) }, addToGroupOrLayer: function(arg){ arg.add(this.textGroup); } }整个图片绘制 // 创建舞台 var stage = new Konva.Stage({ container: 'container', // 需要存放舞台的dom容器 width: 621/2, // 设置全屏 height: 974/2 }); // 创建层 var layer = new Konva.Layer(); // 创建一个层 // stage.add(layer); // 把层添加到舞台（这里写在了最后） // 中心点坐标 // var cenX = stage.width()/2; // 注意Konva获取数据都是用方法获取值 // var cenY = stage.height()/2; // 创建一个组存放文字 var group = new Konva.Group({ x: 0,y: 0 }) // 绘制文字数据 var dataObj = [ { // 创建标题的文字 x: 0, y: 30, width: stage.width(), align: 'center', text: "活动名称", fontSize: 26, fontStyle: 'bold', fill: 'white' }, { // 创建活动说明文字 x: 0, y: 66, width: stage.width(), align: 'center', text: '最终解释权归门店所有', fontSize: 16, fill: 'white' } ]; var text = new TextTitle(dataObj); // 绘制二维码 // 创建二维码图片，先转成img，再绘制到canvas中，然后将img移除 var divEle = document.createElement("div"); var divattr = document.createAttribute("id"); divattr.value = "temp"; divEle.setAttributeNode(divattr); document.getElementById("wrapper").appendChild(divEle); new QRCode(document.getElementById("temp"), { text: window.location.href, // 首页链接 width: 72, //生成的二维码的宽度 height: 72, //生成的二维码的高度 colorDark : "#000000", // 生成的二维码的深色部分 colorLight : "#ffffff", //生成二维码的浅色部分 correctLevel : QRCode.CorrectLevel.H }); var qrcodeImg = $('#temp img')[0]; // 绘制logo,背景的图片 var imgBig = new Image(); imgBig.src = "base64图片"; // 将绘制方法都写在图片onload内部 imgBig.onload = function(){ var kImage = new Konva.Image({ image: imgBig, x: 0, y: 0, width: stage.width(), height: stage.height() }); group.add(kImage); // 添加二维码图片 var qrCodeImage = new Konva.Image({ image: qrcodeImg, x: 204, y: 366, width: 72, height: 72 }); group.add(qrCodeImage); layer.add(group); text.addToGroupOrLayer(layer); layer.draw(); stage.add(layer); // 把层添加到舞台 // 绘制完二维码后将标签删除 var temp = document.getElementById("temp"); document.getElementById('wrapper').removeChild(temp); // 使用canvas.toDataURL()方法，将canvas生成base64 var dataURL = stage.toDataURL(); var actulImg = new Image(); actulImg.src = dataURL; actulImg.onload = function(){ // 生成后删除canvas var konvajs = document.getElementsByClassName('konvajs-content')[0]; document.getElementById('container').removeChild(konvajs); document.getElementById('container').appendChild(actulImg); } } 使用的是canvas.toDataURL()方法，出现跨域问题报错信息： Konva error: Unable to get data URL. Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.翻译：Konva错误：无法获取数据URL。未能对“htmlcanvaseelement”执行“toDataURL”：无法导出受污染的画布。 整个报错信息的原因就是，使用canvas.toDataURL()方法，出现跨域问题了。因为很多情况下都会使用CDN存储的图片，在这里使用本地图片还是不现实，所以，需要解决这个问题。 解决办法尝试： img设置img.crossOrigin = "anonymous"是没用的； URL.createObjectURL和URL.revokeObjectURL也是转换图片格式的方式，自测没写通； 将图片转换成base64使用（这里需要借助后端配合了），如果使用这种办法，出现某个图片或者二维码图片未显示出来，可能是绘制顺序出错。 使用base64图片方式，在PC模拟器上效果显示是符合的，那么我们用微信浏览器试试吧！问题又出现了： 生成的canvas不虚，img图片太虚虚虚虚虚虚虚......导致根本没办法使用； 生成的二维码不见了，safari浏览器可以显示出二维码，偶发性如果第一次进入，点击显示的按钮，safair整张图片都不显示了，应该是未生成就显示了； 后续再开发再更新！！！
生成海报功能最终使用的是html2canvas.js库实现的，不过过程中也有些兼容性问题需要解决，下面是生成海报方法： createIMG () { //一键生成图片 window.scrollTo(0, 0); // 解决部分手机生成图片大片白边 var _this = this; // 海报布局，将布局好的结构进行canvas转换，再将canvas转换成图片 var targetDom = document.getElementById("pic_wrapper_page"); html2canvas( targetDom, { useCORS: true, height: targetDom.offsetHeight-2,// 解决部分手机生成图片部分白边 width: targetDom.offsetWidth-2, }).then(function(canvas) { var image = canvas.toDataURL("image/png"); _this.pic_src = image // 最终生成的图片 }); } |
【本文地址】
今日新闻 |
推荐新闻 |